<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta charset="utf-8">
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta http-equiv="Cache-Control" content="no-siteapp">
		<meta content="yes" name="apple-mobile-web-app-capable">
		<meta content="yes" name="apple-touch-fullscreen">
		<meta content="telephone=no" name="format-detection">
		<meta content="black" name="apple-mobile-web-app-status-bar-style">
		<meta name="copyright" content="Copyright &copy;UnitedBitcoin">
		<meta name="revisit-after" content="1 days">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<title>WSEC 亚洲超级电网</title>
		<link rel="shortcut icon" href="img\icon.png">
		<link rel="stylesheet" href="css\style.css?__hbt=1516279253583">
		<script type="text/javascript" src="js\jquery-1.8.3.min.js"></script>
		<script type="text/javascript" src="js\iscroll.min.js"></script>
		<style type="text/css">
			
			.english{
				display: none;	
			}
			.china{
				
				word-wrap: break-word;
				word-break: normal;
			}
			.japanese{
				display: none;
			}
			.korean{
				display: none;
			}
			.iScrollHorizontalScrollbar.iScrollLoneScrollbar{
				background: #25252a;
				border-radius: 3px;
			}
			.iScrollIndicator{
				background: #dadada !important;
            }
            .nav li span a{
                color: #fff;
            }
            .news{
                width: 60%;
                margin: 0 auto;
            }
            .news p{
                font-size: 26px;
                color: #fff;
                margin-bottom: 40px;
            }
            .news .load{
                text-align: center;
            }
            .news .load a{
                
                font-size: 14px;
                color: #9d9ea0;
            }
            .news ul li{
                height: 90px;
                margin-bottom: 30px;
            }
            .news ul li p{
                margin-bottom: 10px;
                line-height: 20px;
                font-size: 14px;
                height: 40px;
            }
            .news ul li p span:nth-child(1){
                float: left;
            }
            .news ul li p span:nth-child(2){
                float: right;
            }
            .news ul li p span.title{
                float: none;
            }
            .news ul li p a{
                color: #fff;
            }
            .news ul li p a:hover{
                color: #0b39ef;
            }
            .details{
                display: none;
            }
			.details span:nth-child(1){
                float: left;
            }
			.details span:nth-child(2){
                float: right;
            }
			.details p{
				font-size: 16px;
				margin-bottom: 20px;
				
			}
			.details p:nth-child(1){
				height: 20px;
			}
			.details .title{
				line-height: 26px;
				margin-top: 28px;
				height: 350px;
				border-bottom: 1px solid #fff;
				text-indent: 2em;
				margin-bottom: 20px;
			}
			
		</style>
	</head>

	<body>
		<div class="headerBg" id="header"></div>
		<header>
			<div class="headerBox">
				<img class="logo" src="img\LOGO.gif" alt="BITCOIN SHINE">
				<ul class="language">
					<li>
						<a>EN</a>
						|
						<a class="active">中文</a>
					</li>
				</ul>
				<ul id="nav" class="nav">
					<li><span class="china"><a href="./index.html">首页</a></span><span class="english"><a href="./index.html">Home</a></span><span class="japanese">日语</span><span class="korean">韩语</span></li>			
				</ul>
				
			</div>
			
		</header>
		<div style="background:#121619;width:1920px;height:974px;padding-top:140px">
            <div class='news'>
                <p class='china'>新闻中心</p>
                <p class='english'>News Center</p>
                <div class='center'>
                    <ul id='lists'>
                    
                    </ul>
                    <p class='china load'><a href="javascript:;">点击加载更多</a></p>
                    <p class='english load'><a href="javascript:;">Click load more</a></p>
                </div>
                <div class='details'>
                    <div id='detail'>
                               
					</div>
                </div>
            </div>
        </div>
		<script>
			var windowHeight = $(document.body).outerHeight(true)/3;
				var addNum = 100/200;
				
			    var Opacity;
			$(window).scroll(function(){
		    		
				    if($(window).scrollTop()<110){
				      	$('#header').css({"filter":"alpha(Opacity=0)","-moz-opacity":"0","opacity":"0"}); 				      
				    }else{
				    	Opacity = parseInt($(window).scrollTop()*addNum); 
				    	if(Opacity>=80){
				    		$('#header').css({"filter":"alpha(Opacity=80%)","-moz-opacity":'0.8',"opacity":'0.8'}); 
				    	}else{
				    		$('#header').css({"filter":"alpha(Opacity="+Opacity+"%)","-moz-opacity":Opacity/100,"opacity":Opacity/100}); 
				    	}
				    	
				    }
				});
			$(function(){
				
				
				
				$('#nav li').on('click',function(){
			   		var index = $(this).index();
					if(index<5){
			   			$('html, body').animate({  
				            scrollTop: $('.sider').eq(index).offset().top-90  
				        }, 1000); 
			   		}
			   		 
			    });
			    $('.language a').on('click',function(){
			    	$('.language a').removeClass('active');
			   		var indexNum = $(this).index();
			   		$('.language a').eq(indexNum).addClass('active');
			   		
					if (indexNum==1) {
						$('.japanese').hide();
						$('.korean').hide();
						$('.english').hide();
						$('.china').show();
						$('title').html('WSEC 亚洲超级电网')
					} else if (indexNum==0) {
						$('.japanese').hide();
						$('.korean').hide();
						$('.china').hide();
						$('.english').show();
						$('title').html('WSEC Asian supergrid')
					} 
			    });
			    
			    $('.submenu li').on('click',function(){
			    	$('.menu>li>a').html($(this).text());
			    	 $(this).hide().siblings().show();
			   		var index = $(this).index();
					if (index==0) {
						$('.japanese').hide();
						$('.korean').hide();
						$('.english').hide();
						$('.china').show();
					} else if (index==1) {
						$('.japanese').hide();
						$('.korean').hide();
						$('.china').hide();
						$('.english').show();
					} else if (index==2) {
						
						$('.korean').hide();
						$('.china').hide();
						$('.english').hide();
						$('.japanese').show();
					} else if (index==3) {
						$('.japanese').hide();
						$('.english').hide();
						$('.china').hide();
						$('.korean').show();
					}
			   		 
			   });
				
				$('.logo').on('click',function(){
			   		var index = $(this).index();
			   		if(index==0){
			   			$('html, body').animate({  
				            scrollTop: 0  
				        }, 1000); 
			   		}
			   		
				
			   	})
				var myscroll= new IScroll('#wrapper',{
                        mouseWheel: true,
                        scrollbars: true,
                        //scrollbars: "custom",
                        //fadeScrollbars : true,
                        bounceEasing : 'quadratic',
                        scrollX: true,
                        scrollY: false
                    });
			})
            
            //新闻列表
            var zhlists=[
                {'id':0,'title':"新闻1",'time':"2018.01.01",'content':'这里是新闻内容这里是新闻内容这里是新闻内容这里是新闻内容这里是新闻内容这里是新闻内容这里是新闻内容这里是新闻内容这里是新闻内容这里是新闻内容这里是新闻内容这里是新闻内容这里是新闻内容这里是新闻内容这里是新闻内容这里是新闻内容这里是新闻内容这里是新闻内容这里是新闻内容这里是新闻内容这里是新闻内容这里是新闻内容'},
                {'id':1,'title':"新闻2",'time':"2018.01.02",'content':'这里是新闻内容这里是新闻内容这里是新闻内容这里是新闻内容这里是新闻内容这里是新闻内容这里是新闻内容这里是新闻内容这里是新闻内容这里是新闻内容这里是新闻内容这里是新闻内容这里是新闻内容这里是新闻内容这里是新闻内容这里是新闻内容这里是新闻内容这里是新闻内容这里是新闻内容这里是新闻内容这里是新闻内容这里是新闻内容'},
                {'id':2,'title':"新闻3",'time':"2018.01.03",'content':'这里是新闻内容这里是新闻内容这里是新闻内容这里是新闻内容这里是新闻内容这里是新闻内容这里是新闻内容这里是新闻内容这里是新闻内容这里是新闻内容这里是新闻内容这里是新闻内容这里是新闻内容这里是新闻内容这里是新闻内容这里是新闻内容这里是新闻内容这里是新闻内容这里是新闻内容这里是新闻内容这里是新闻内容这里是新闻内容'},
                {'id':3,'title':"新闻4",'time':"2018.01.04",'content':'这里是新闻内容这里是新闻内容这里是新闻内容这里是新闻内容这里是新闻内容这里是新闻内容这里是新闻内容这里是新闻内容这里是新闻内容这里是新闻内容这里是新闻内容这里是新闻内容这里是新闻内容这里是新闻内容这里是新闻内容这里是新闻内容这里是新闻内容这里是新闻内容这里是新闻内容这里是新闻内容这里是新闻内容这里是新闻内容'},
                {'id':4,'title':"新闻5",'time':"2018.01.05",'content':'这里是新闻内容这里是新闻内容这里是新闻内容这里是新闻内容这里是新闻内容这里是新闻内容这里是新闻内容这里是新闻内容这里是新闻内容这里是新闻内容这里是新闻内容这里是新闻内容这里是新闻内容这里是新闻内容这里是新闻内容这里是新闻内容这里是新闻内容这里是新闻内容这里是新闻内容这里是新闻内容这里是新闻内容这里是新闻内容'},
            ];
            var List='';
            for (let i=0;i<zhlists.length;i++){
                  List += `
                <li>
                        <p><span>${zhlists[i].title}</span><span>${zhlists[i].time}</span></p>
                        <p><span class='title'>${processStr(zhlists[i].content,153)}</span><a href="javascript:;" onclick="details('${i}')">[查看详情]</a></p>            
                    </li>
                `
            }
            $('#lists').html(List)
            //超过字符出现省略号
            function processStr(str,n){
                var l = str.length;
                if (l <= n) return str;
                return str.slice(0, n) + "...";
            }
            //详情页
            function details(id){
                var str='';
                for (let j=0;j<zhlists.length;j++){
                    if (j>0&&zhlists[j].id==id&&j<zhlists.length-1){
                        str =`
                         <div>
							<p><span>${zhlists[j].title}</span><span>${zhlists[j].time}</span></p>
                        	<p><span class='title'>${zhlists[j].content}</span></p>
						 </div>
						 <p class='step' onclick="step('${j-1}')">上一篇：${zhlists[j-1].title}</p>  
						 <p class='next' onclick="next('${j+1}')">下一篇：${zhlists[j+1].title}</p>  
                        `
                        break;
                    }
					if (j==0&&zhlists[j].id==id){
						str =`
                         <div>
							<p><span>${zhlists[j].title}</span><span>${zhlists[j].time}</span></p>
                        	<p><span class='title'>${zhlists[j].content}</span></p>
						 </div>
						 <p class='next' onclick="next('${j+1}')">下一篇：${zhlists[j+1].title}</p>  
                        `
                        break;
					}
					if (zhlists[j].id==id&&j==zhlists.length-1){
						str =`
                         <div>
							<p><span>${zhlists[j].title}</span><span>${zhlists[j].time}</span></p>
                        	<p><span class='title'>${zhlists[j].content}</span></p>
						 </div>
						 <p class='step' onclick="step('${j-1}')">上一篇：${zhlists[j-1].title}</p>  
                        `
                        break;
					}
                }
                $('#detail').html(str)
                $('.center').hide();
                $('.details').show();
            }
			function step(n){
				details(n);
			};
			function next(n){
				details(n)
			}
            //$('.title').html(processStr($('#title').html(),153));
		</script>
	</body>

</html>